import Vue from 'vue'
import App from './App.vue'
import './assets/css/style.css';
import './assets/css/mui.min.css';
import './assets/css/icons-extra.css';



// 1.1导入路由的包
import VueRouter from 'vue-router';

// 导入mint-ui中的Swiper组件
import { Header, Swipe, SwipeItem, Button  } from 'mint-ui';
import MintUi from 'mint-ui';

// 1.2  导入自己的路由模块router.js
import router from './router.js';

// 2.1导入vue-resourse
import BueResource from 'vue-resource';
// 使用相关组件
Vue.use(VueRouter)
Vue.use(MintUi);
// 注册vuex
import Vuex from 'vuex';
Vue.use(Vuex);

// 每次进入网站都会调用main.js,在调用的时候就从本地存储获取购物车数据，放到car中
var car = JSON.parse(localStorage.getItem("car") || "[]");


const store = new Vuex.Store({

  state: {   //this.$store.state.***
    car: car,  //用于存放购物车中的数据，在car数组中个，存储一些上平的对象，
    // 展示可以将这个商品的对象设计成     {id：商品id,count:购买的数量，selected:false}
  },
  mutations: {   //this.$store.commit("事件名称"，‘唯一参数’)
      
    addToCar(state, goodinfo) {
      // 点击加入购物车，将商品价到购物车，保存到store中的state上
      // 分析：
      // 1.如果购物车中已经有这个商品，就更新数量
      // 2.没有就直接添加这个对象

      //假设在购物车中没找到对应的商品 
      var flag = false;
      state.car.some(itemp => {
        if (itemp.id == goodinfo.id) {
          itemp.count += parseInt(goodinfo.count);
          flag = true;
          return true;
        }
      })
      // 如果循环完毕，得到的flag还是false,name就直接将商品push到car中
      if (!flag) {
        this.state.car.push(goodinfo);
      }
      // 当更新car之后就将数据保存到localstroage
      localStorage.setItem("car", JSON.stringify(state.car))
    },
    
    // 通过id改变商品数量
    changeNumInCar(state, inf) {
      state.car.forEach(item => {
        if (item.id == inf.id) {
          item.count = parseInt(inf.val);
        }
      })

      localStorage.setItem("car", JSON.stringify(state.car))
    },
      
    // 通过id删除store商品
    delgoodsById(state, obj) {
      state.car.forEach(item => {
        if (item.id == parseInt(obj.id)) {
          state.car.splice(obj.index, 1);
        }
      })
      localStorage.setItem("car", JSON.stringify(state.car))
    },
    // 修改开关状态
    handleNum(state, id) {
      state.car.forEach(item => { 
        if (item.id == id) { 
          // 修改开关状态
          item.selected = item.selected;
          
          if (item.selected == true) {
              
          }
          console.log(item.id,item.selected)
        }
      })
      localStorage.setItem("car", JSON.stringify(state.car))
    },
    
    
    },
    getters: {  //  this.$store.getters.***
      getAllGoods(state) { 
        var c = 0;
        state.car.forEach(item => { 
          c += item.count;
        })
        return c;
      },
      // 获取数量的总件数和总价格
      getgoodCountAll(state) {
        var obj = {
          count: 0,   //勾选数量
          amount: 0    //勾选总计
        }
        state.car.forEach(item => {
          if (item.selected) {
            obj.count += item.count;
            obj.amount += item.count * item.price;
          }
        })
        return obj;
      }
    }

})

//安装缩略图的插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)



import moment from 'moment';

// 定义全局过滤器
Vue.filter('dateFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern);
})


Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.use(BueResource);


Vue.component(Header.name, Header);
new Vue({
  el: '#app',
  render: h => h(App),
  
  router,   // 1.3 挂载路由对象
  store         //挂载store实例
})
